<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="js/layer/skin/default/layer.css" />
		<link rel="stylesheet" href="css/style.css" />
		<title></title>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav header-card">
			<a class="mui-action-back mui-icon mui-icon-arrowthinleft mui-pull-left"></a>
			<a href="javascript:;" class="mui-pull-right sharing" id="open-operation">
				<div class="tm-icon">
					<img src="images/more-icon.png" alt="" width="16" height="16" />
				</div>
			</a>
			<div class="header-card-con">
				<div class="header-card-con-item">
					<div class="uk-text-center">
						<div class="tm-label-no tm-font-white">
							<span class="tm-lgx-size">李兰英</span>
						</div>
					</div>
					<div class="tm-flex-row-lgm">
						<div class="main-content">
							<div class="client-operation-item uk-text-center">
								<ul class="uk-grid">
									<li class="uk-width-1-3">
										<a href="" class="operation-item">
											<img src="images/phone-white.png" alt="" width="16" height="16" />
										</a>
									</li>
									<li class="uk-width-1-3">
										<a href="" class="operation-item">
											<img src="images/weixin-white.png" alt="" width="16" height="16" />
										</a>
									</li>
									<li class="uk-width-1-3">
										<a href="" class="operation-item">
											<img src="images/mail.png" alt="" width="16" height="16" />
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="tm-label-md tm-bg-white tm-border-bottom">
				<div class="main-content">
					<div class="main-tab">
						<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-itme2">
							<a class="mui-control-item tm-icon-btn mui-active" href="#item100">
								<div class="tm-label-item">
									<div class="tm-label">
										详细资料
									</div>
								</div>
							</a>
							<a class="mui-control-item tm-icon-btn" href="#item200">
								<div class="tm-label-item">
									<div class="tm-label">
										成交订单
									</div>
								</div>
							</a>
							<a class="mui-control-item tm-icon-btn" href="#item300">
								<div class="tm-label-item">
									<div class="tm-label">
										所有者
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>

		</header>

		<div class="mui-content">

			<div class="main-tab-con">
				<!--切换1-->
				<div id="item100" class="mui-control-content mui-active">
					<div class="tm-df-size">
						<ul class="mui-table-view max">
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">获得时间</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">2017-11-1</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">客户名称</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">李兰英</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">意向产品</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">雷克萨斯ES</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">联系电话</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">18566661234</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">邮箱地址</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">12658664@163.com</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">社交账号</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">微信:18566661234</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">所在城市</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">成都市</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">家庭地址</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">高新区中和镇远大中央公园高新区中和镇远大中央公园高新区中和镇远大中央公园</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">客户状态</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">固定客户</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">客户来源</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">朋友圈分享</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">成熟度</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">熟悉</div>
										</div>
									</div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="tm-cell-pad">
									<div class="tm-flex">
										<div class="tm-6em tm-flex-head">
											<span class="tm-font-gray">备注</span>
										</div>
										<div class="tm-flex-1">
											<div class="tm-font-boldx mui-ellipsis">这是备注内容</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!--切换1 end-->

				<!--切换2-->
				<div id="item200" class="mui-control-content">

					<div class="indent-cell tm-df-size">
						<div class="indent-card">

							<div class="mui-table-view max">
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/atav.png);"></div>
														<img class="redundant-img" src="images/px-1.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">张三</span>
												</div>
											</div>
										</div>
										<div>
											<span class="tm-font-gray">2017-11-1</span>
										</div>
									</div>
								</div>
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center goods-item">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/goods-cat.jpg);"></div>
														<img class="redundant-img" src="images/px-3-4.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">雷克萨斯ES</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tm-label tm-bg-white">
								<div class="main-content">
									<div class="tm-font-bold">
										<span class="tm-font-green tm-lg-size">¥1880000</span>
									</div>
								</div>
							</div>
						</div>

						<div class="indent-card">
							<div class="mui-table-view max">
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/atav.png);"></div>
														<img class="redundant-img" src="images/px-1.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">张三</span>
												</div>
											</div>
										</div>
										<div>
											<span class="tm-font-gray">2017-11-1</span>
										</div>
									</div>
								</div>
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center goods-item">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/goods-cat.jpg);"></div>
														<img class="redundant-img" src="images/px-3-4.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">雷克萨斯ES</span>
												</div>
											</div>
										</div>
									</div>
									<div class="tm-flex flex-align-center goods-item">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/goods-cat.jpg);"></div>
														<img class="redundant-img" src="images/px-3-4.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">雷克萨斯ES</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tm-label tm-bg-white">
								<div class="main-content">
									<div class="tm-font-bold">
										<span class="tm-font-green tm-lg-size">¥1880000</span>
									</div>
								</div>
							</div>
						</div>

						<div class="indent-card">
							<div class="mui-table-view max">
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/atav.png);"></div>
														<img class="redundant-img" src="images/px-1.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">张三</span>
												</div>
											</div>
										</div>
										<div>
											<span class="tm-font-gray">2017-11-1</span>
										</div>
									</div>
								</div>
								<div class="mui-table-view-cell">
									<div class="tm-flex flex-align-center goods-item">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/goods-cat.jpg);"></div>
														<img class="redundant-img" src="images/px-3-4.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">雷克萨斯ES</span>
												</div>
											</div>
										</div>
									</div>
									<div class="tm-flex flex-align-center goods-item">
										<div class="tm-flex-1">
											<div class="tm-flex flex-align-center">
												<div class="tm-atav tm-flex-head">
													<div class="tm-location-parent">
														<div class="tm-location-img" style="background-image: url(images/goods-cat.jpg);"></div>
														<img class="redundant-img" src="images/px-3-4.png" alt="" width="100">
													</div>
												</div>
												<div>
													<span class="tm-font-bold">雷克萨斯ES</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tm-label tm-bg-white">
								<div class="main-content">
									<div class="tm-font-bold">
										<span class="tm-font-green tm-lg-size">¥1880000</span>
									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
				<!--切换2 end-->

				<!--切换3-->
				<div id="item300" class="mui-control-content">
					<div class="possessor-cell">
						<ul class="mui-table-view max">
							<li class="mui-table-view-cell">
								<div class="tm-flex flex-align-center">
									<a href="" class="tm-flex-1">
										<div class="tm-flex flex-align-center">
											<div class="tm-atav tm-flex-head">
												<div class="tm-location-parent">
													<div class="tm-location-img" style="background-image: url(images/atav.png);"></div>
													<img class="redundant-img" src="images/px-1.png" alt="" width="100">
												</div>
											</div>
											<div class="tm-label-no">
												<span class="tm-df-size tm-font-boldx">安总</span>
											</div>
										</div>
									</a>
									<div class="">
										<div class="tm-flex">
											<div class="tm-cell-operation-group tm-icon-item">
												<a href="" class="tm-icon tm-icon-btn">
													<img src="images/phone.png" alt="" width="12" height="12" />
												</a>
												<a href="" class="tm-icon tm-icon-btn">
													<img src="images/weixin-gray.png" alt="" width="12" height="12" />
												</a>
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!--切换3 end-->
			</div>

		</div>



		
		<div class="main-layer-group" id="main-layer-group">
			<div class="mask" id="main-mask">

			</div>
			<div class="content-list no">
				<div class="show-operation-btns tm-bg-white">
					<div class="uk-text-center tm-df-size">
						<a href="" class="operation-btn-item tm-block">
							编辑
						</a>
						<a href="javascript:;" id="open-layer" class="operation-btn-item tm-block">
							删除
						</a>
						<a href="" class="operation-btn-item tm-block">
							转交
						</a>
						<a href="" class="operation-btn-item tm-block">
							录订单
						</a>
					</div>
				</div>
			</div>
		</div>

		<!--layer-->

		<div id="layer" style="display: none;">
			<div class="tm-layer-header tm-default-size tm-font-default">
				<div class="tm-label-lg">
					<div class="main-content">
						<div class="tm-inline-1-5 tm-df-size tm-font-bold">
							删除后不可恢复，且与客户的所有资料将一起删除
						</div>
					</div>
				</div>
			</div>
			<div class="tm-layer-body">
				<div class="main-content">
					<input type="password" class="tm-small-input" value="" placeholder="输入登录密码确认" />
				</div>
			</div>
			<div class="tm-layer-footer">
				<div class="tm-label-lg">
					<div class="main-content-md">
						<div class="to-btn-group">
							<ul class="uk-grid">
								<li class="uk-width-1-2">
									<button id="close-layer" type="button" class="mui-btn mui-btn-block">取消</button>
								</li>
								<li class="uk-width-1-2">
									<button type="button" class="mui-btn mui-btn-green mui-btn-block">确定</button>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--layer end-->

		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>

		<script type="text/javascript">
			
			var closeAll = function(){
				$("#main-layer-group").removeClass("active");
			}
			var openAll = function(){
				$("#main-layer-group").addClass("active");
			}
			
			mui.ready(function(){
				mui(document).on("tap","#main-mask",function(){
					closeAll();
				})
				
				mui(document).on("tap","#open-operation",function(){
					openAll();
				})
			})
		</script>

		<script type="text/javascript">
			mui(document).on('tap', "#open-layer", function() {
				layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					skin: 'tm-page-layer',
					shade: 0.5,
					shadeClose: true,
					content: $('#layer')
				});
			})
			//关闭
			mui(document).on("tap", "#close-layer", function() {
				layer.closeAll();
			})
		</script>

	</body>

</html>